<template>
  <!-- <div>啊实打实大苏打</div> -->
  <!-- <div class="pic" id="pic"></div> -->
  <!-- <div class="ppic" id="ppic"></div> -->
  <div class="picc" id="picc"></div>
</template>

<script>
import * as echarts from "echarts";
import data from "../assets/data.json";
export default {
  name: "test",
  methods: {
    // getPic() {
    //   // let ROOT_PATH = "https://echarts.apache.org/examples";

    //   let chartDom = document.getElementById("pic");
    //   let myChart = echarts.init(chartDom);
    //   let option;
    //   let pData = data;
    //   console.log(pData);
    //   // let pData = JSON.parse(data)
    //   myChart.showLoading();
    //   myChart.hideLoading();
    //   myChart.setOption(
    //     (option = {
    //       tooltip: {
    //         trigger: "item",
    //         triggerOn: "mousemove",
    //       },
    //       series: [
    //         {
    //           type: "tree",
    //           data: [pData],
    //           top: "18%",
    //           bottom: "14%",
    //           layout: "radial",
    //           symbol: "emptyCircle",
    //           symbolSize: 7,
    //           initialTreeDepth: 3,
    //           animationDurationUpdate: 750,
    //           emphasis: {
    //             focus: "descendant",
    //           },
    //         },
    //       ],
    //     })
    //   );
    //   option && myChart.setOption(option);
    // },
    // getPpic() {
    //   //   var ROOT_PATH = "https://echarts.apache.org/examples";

    //   let chartDom = document.getElementById("ppic");
    //   let myChart = echarts.init(chartDom);
    //   let option;
    //   let pData = data;
    //   myChart.showLoading();
    //   myChart.hideLoading();
    //   pData.children.forEach(function (datum, index) {
    //     index % 2 === 0 && (datum.collapsed = true);
    //   });
    //   myChart.setOption(
    //     (option = {
    //       tooltip: {
    //         trigger: "item",
    //         triggerOn: "mousemove",
    //       },
    //       series: [
    //         {
    //           type: "tree",
    //           data: [pData],
    //           top: "1%",
    //           left: "7%",
    //           bottom: "1%",
    //           right: "20%",
    //           symbolSize: 7,
    //           label: {
    //             position: "left",
    //             verticalAlign: "middle",
    //             align: "right",
    //             fontSize: 9,
    //           },
    //           leaves: {
    //             label: {
    //               position: "right",
    //               verticalAlign: "middle",
    //               align: "left",
    //             },
    //           },
    //           emphasis: {
    //             focus: "descendant",
    //           },
    //           expandAndCollapse: true,
    //           animationDuration: 550,
    //           animationDurationUpdate: 750,
    //         },
    //       ],
    //     })
    //   );
    //   option && myChart.setOption(option);
    // },
    getPicc() {
      let chartDom = document.getElementById("picc");
      let myChart = echarts.init(chartDom);
      let option;
      let pData = data
      myChart.showLoading();
        myChart.hideLoading();
        myChart.setOption(
          (option = {
            tooltip: {
              trigger: "item",
              triggerOn: "mousemove",
            },
            series: [
              {
                type: "tree",
                data: [pData],
                left: "2%",
                right: "2%",
                top: "8%",
                bottom: "20%",
                symbol: "emptyCircle",
                orient: "vertical",
                expandAndCollapse: false,
                label: {
                  position: "top",
                  rotate: 0,
                  verticalAlign: "middle",
                  align: "center",
                  fontSize: 18,
                },
                leaves: {
                  label: {
                    fontSize:18,
                    position: "bottom",
                    rotate: -45,
                    verticalAlign: "middle",
                    align: "left",
                  },
                },
                animationDurationUpdate: 750,
              },
            ],
          })
        );
      option && myChart.setOption(option);
    },
  },
  mounted() {
    // this.getPic();
    // this.getPpic();
    this.getPicc()
  },
};
</script>

<style>
.pic {
  width: 100%;
  height: 1400px;
}
.ppic {
  width: 100%;
  height: 2000px;
}
.picc {
  width: 100%;
  height: 1000px;
}
</style>